<style>
    body {
        background: #f3f1f3;
    }

    .orderList {
        padding-bottom: .5rem;
    }

    .orderList .nav {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        background: white;
    }

    .orderList .nav li {
        width: 16.6%;
        padding: .5rem 0;
        text-align: center;
        border-bottom: 1px solid transparent;
    }

    .orderList .nav li:hover {
        border-bottom: 1px solid #39AC6A;
    }

    .okList {
        border-bottom: 1px solid #39AC6A !important;
        color: #39AC6A;
    }

    .noList {
        border-bottom: 1px solid transparent !important;
        color: black;
    }

    .orderDesc li {
        margin-top: .5rem;
        display: flex;
        flex-direction: column;
    }

    .orderDesc .rendImg {
        width: 100%;
        height: 170px;
    }

    .orderDesc .rendImg img {
        width: 100%;
        height: 100%;
    }

    .orderDesc .rendTxt {
        padding: .5rem;
        background: white;
    }

    .orderDesc .rendTxt p {
        padding: .1rem 0;
        color: #666;
        font-size: 90%;
    }

    .orderDesc .rendTxt span {
        margin-left: .3rem;
        color: #333;
    }

    .orderDesc .rendBtn {
        box-sizing: border-box;
        margin-top: 1px;
        background: white;
        width: 100%;
        text-align: right;
        padding: .3rem;
    }

    .orderDesc li button {
        width: 30%;
        padding: .3rem .5rem;
        background: #39AC6A;
        color: white;
        border-radius: 1rem;
        font-size: 110%;
    }

    @media screen and (min-width: 320px) and (max-width: 360px) {
        .orderDesc .rendImg {
            width: 100%;
            height: 170px;
        }
    }

    @media screen and (min-width: 360px) and (max-width: 413px) {
        .orderDesc .rendImg {
            width: 100%;
            height: 200px;
        }
    }

    @media screen and (min-width: 414px) {
        .orderDesc .rendImg {
            width: 100%;
            height: 220px;
        }
    }
</style>
<div class="orderList">
    <ul class="nav">
        <li ng-click="screeOrderData(1,'1')" class="okList">待支付</li>
        <li ng-click="screeOrderData(2,'2')">已支付</li>
        <li ng-click="screeOrderData(3,'4')">正在使用</li>
        <li ng-click="screeOrderData(4,'5')">待评价</li>
        <li ng-click="screeOrderData(5,'7')">退房中</li>
        <li ng-click="screeOrderData(6,'6')">已完结</li>
    </ul>
    <ul class="orderDesc">
        <li ng-repeat="orderData in screeData track by $index">
            <div class="rendImg">
                <img ng-src="{{httpSrc+orderData.img.img}}" alt="房间详情">
            </div>
            <div class="rendTxt">
                <p>房间名称：<span>{{orderData.title}}</span></p>
                <p>房间地址：<span>{{orderData.address}}</span></p>
                <p>入住时间：<span>{{orderData.pre_start_time}}</span></p>
                <p>结束时间：<span>{{orderData.pre_end_time}}</span></p>
                <p>订单价格：<span>{{orderData.money | currency:"￥"}}</span></p>
            </div>
            <div class="rendBtn" ng-if='orderData.btn'>
                <button ng-click="openBtn(orderData.ouseid,orderData.btn,orderData.open_deviceid,orderData.open_lockid,orderData.id,orderData.pre_start_time)" ng-if="orderData.btn">{{orderData.btn}}</button>
                <button ng-if='(orderName=="4")' ng-click="outHouse($index,orderData.id)">退房</button>
             
                <button ng-if="orderName==2 || orderName==1 || !orderName" ng-click="cancleOrder($index,orderData.id)">取消订单</button>
            </div>
        </li>
        <div class="weui-loadmore" ng-if='closexl || orderData.length>1'>
            <i class="weui-loading"></i>
            <span class="weui-loadmore__tips">正在加载</span>
        </div>
    </ul>
</div>